<template>
  <view v-if="update" class="bgColor" style="padding-bottom: calc(var(--window-bottom) + 50px);">

    <view>
      <!--      <imgsBanner-tag :imgList='imgList' autoplay duration='500' interval="5000" :currentImg='currentImg'
                            :isShowSmallImgs='true' customizeDisplayField='url' @change='onChange'></imgsBanner-tag> -->
      <u-swiper
          :list="imgList"
          height="600"
      ></u-swiper>
    </view>

    <view
        style="width: 95%;margin: auto;padding: 30rpx;background-color:white;border-radius: 20rpx;margin-top: 30rpx">
      <view style="width: 100%;">
        <text style="color: red;font-size: 30rpx;font-weight: 600">￥</text>
        <text style="color: red;font-size: 36rpx;font-weight: 600">{{skillGood.price }}</text>
      </view>

      <view style="width: 100%;">
        <text text style="font-size: 32rpx;font-weight: 600">{{ skillGood.commodityName }}</text>
      </view>
    </view>

    <view style="width: 95%;margin: auto;padding: 30rpx;border-radius: 20rpx;margin-top: 30rpx;background-color:white;">
      <u-form
          labelPosition="left"
          :model="order"
          ref="form1"
      >
        <u-form-item
            label="规格"
            prop="specification"
            ref="item1"
            borderBottom
        >
          <u-input
              v-model="order.specification"
              :disabled="true"
              :border=false
              disabledColor="#ffffff"
              placeholder="请选择"

          ></u-input>
          <u-icon
              slot="right"
              name="arrow-right"
          ></u-icon>
        </u-form-item>

        <u-form-item
            label="数量"
            prop="count"
            ref="item2"
            borderBottom
        >
          <u-input
              v-model="order.count"
              :disabled="true"
              :border=false
              @click="openSelect"
              disabledColor="#ffffff"
              placeholder="请选择"
          ></u-input>
          <u-icon
              slot="right"
              name="arrow-right"
          ></u-icon>
        </u-form-item>
      </u-form>
    </view>


    <view class="fixed-bottom">
<!--      <u-count-down :time="10000" format="HH:mm:ss:SSS" autoStart millisecond></u-count-down>-->
<!--      <u-count-down></u-count-down>-->
      <u-button type="error" :disabled="disabled||parseInt(new Date(this.skillGood.endDate).getTime()-new Date().getTime())<0" text="禁用" @click="goSkill">
      <uni-countdown v-if="disabled" :show-day="false" :second="timeupSecond" @timeup="timeup" />
        <text v-if="!disabled">立即抢购</text>
      </u-button>
    </view>


  </view>

</template>

<script>
import {BASE_IMG_URL} from "../../../api/service";
import {mainService} from "../../../api/buyer/main";
import {attachmentService} from "../../../api/buyer/public/attachmentService";
import {skillService} from "../../../api/buyer/public/skill";
import {NetWork} from "../../../api/buyer/common";
export default {
  name: "goodDetailed",
  components: {},
  onLoad(option) {
    const id = decodeURIComponent(option.id);
    this.init(parseInt(id))
  },

  data() {

    return {
      timeupSecond: 10,
      value: 3,
      skillGood: {},
      imgList: [],
      currentImg: 0, //默认展示
      update: true,
      order:{

      },
      disabled:true,
      buttonGroup: [
        {
          text: '立即抢购',
          backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
          color: '#fff'
        }
      ],
      popupShow: false,
    }

  },
  created(){
    // this.init();
  },
  methods: {
    timeup() {
      // uni.showToast({
      //   title: '时间到'
      // })
      this.disabled=false
      this.timeupSecond = 29
    },
    init(id){
      console.log("id",id)
      skillService.findSkillCommodityForView(id).then((res)=>{
        this.skillGood=res.data;
        this.order={
          count:1,
          specification:this.skillGood.specificationsName,
          commodityId:this.skillGood.commodityId,
          skillCommodityId:this.skillGood.eid,
          shopId:this.skillGood.shopId,
          description:this.skillGood.commodityName,
          price:this.skillGood.price
        }
        // console.log(res.data)
        this.loadImg(this.skillGood.commodityId,"Commodity")
        // console.log(this.skillGood.startDate,new Date())
        this.timeupSecond=parseInt((new Date(this.skillGood.startDate).getTime()-new Date().getTime())/1000)
        console.log(this.timeupSecond)
      })
    },
    loadImg(id,name){
      attachmentService.findFile(id,name).then((res)=>{
        let attachments = res.data;
        if(attachments.length){
          attachments.forEach((attachment)=>{
            this.imgList.push(BASE_IMG_URL+attachment.attachmentAddr)
          })
        }
      })
    },
    goSkill(){
      NetWork.checkIsLogin()
      let time=parseInt(new Date(this.skillGood.endDate).getTime()-new Date().getTime());
      console.log(time)
      if(time<0){
        uni.showToast({
          title: "秒杀已经结束了",
          duration: 2000
        });
        this.disabled=false;
        return;
      }
      console.log("cc")
      // uni.showLoading("抢购中...")
      uni.showLoading({title: '抢购中',mask:true});
      skillService.putSkill(this.order.skillCommodityId).then((res)=>{
        // uni.hideLoading();
        uni.hideLoading();
        if(res.data.code==0){
          this.order.good={
            description: this.order.description,
            eid:this.order.commodityId,
            specification:this.order.specification,
            url:this.imgList[0],
          }
          uni.navigateTo({
            url: '/pages/buyer/Skill/SkillOrderFrom?order=' + encodeURIComponent(JSON.stringify(this.order)),
            // url: '/pages/staff/application/production/taskList/task-detail'
          })
        }else{
          uni.hideLoading();
          uni.showToast({
            title: res.data.msg,
            duration: 2000
          });

        }

      }).catch((err)=>{
        uni.hideLoading();
        uni.showToast({
          title: "网络繁忙，请稍后再试",
          duration: 2000
        });
      })
    },
    buy(){
      let info={
        description:this.good.description,
        eid:this.good.eid,
        specification:this.good.specification,
        count:this.good.count,
        price:this.good.price,
        url:this.imgList[0],
      }
      console.log("info",info)

    }
  }
}
</script>

<style scoped>
.position-sticky {
  position: -webkit-sticky !important;
  position: sticky !important;
}

.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: calc(var(--window-bottom) + 3px);
  left: 0;
  z-index: 1030;
  margin-bottom: 6;
}

.addLog {
  position: fixed;
  bottom: calc(var(--window-bottom));
  z-index: 1030;
}
</style>